<template>
  <div
    :class="[
      'action-button-group',
      `action-button-group--${direction}`,
      `action-button-group--${size}`,
      { 'action-button-group--attached': attached },
      { 'action-button-group--elevated': elevated }
    ]"
  >
    <!-- 使用插槽优先 -->
    <slot v-if="$slots.default" />

    <!-- 使用配置生成按钮 -->
    <template v-else>
      <tiny-button
        v-for="(action, index) in actions"
        :key="action.key || index"
        :class="[
          'action-btn',
          action.className,
          { 'action-btn--danger': action.danger },
          { 'action-btn--primary': action.primary }
        ]"
        :disabled="action.disabled"
        :loading="action.loading"
        :size="buttonSize"
        :type="action.type || 'default'"
        @click="handleActionClick(action, index)"
      >
        <component :is="action.icon" v-if="action.icon" />
        <span v-if="action.text">{{ action.text }}</span>
      </tiny-button>
    </template>

    <!-- 更多操作下拉菜单 -->
    <tiny-dropdown
      v-if="moreActions && moreActions.length > 0"
      placement="bottom-end"
      trigger="click"
    >
      <tiny-button
        :size="buttonSize"
        :type="moreButtonType"
        class="more-actions-btn"
      >
        <tiny-icon-more />
      </tiny-button>

      <template #dropdown>
        <tiny-dropdown-menu>
          <tiny-dropdown-item
            v-for="(action, index) in moreActions"
            :key="action.key || index"
            :class="{ 'dropdown-item--danger': action.danger }"
            :disabled="action.disabled"
            @click="handleActionClick(action, index, true)"
          >
            <component :is="action.icon" v-if="action.icon" />
            <span>{{ action.text }}</span>
          </tiny-dropdown-item>
        </tiny-dropdown-menu>
      </template>
    </tiny-dropdown>

    <!-- 确认对话框 -->
    <tiny-popconfirm
      v-if="confirmAction"
      :content="confirmAction.content"
      :title="confirmAction.title"
      :visible="showConfirm"
      @cancel="showConfirm = false"
      @confirm="handleConfirmAction"
    />
  </div>
</template>

<script lang="ts" setup>
import {computed, ref} from 'vue'

// 接口定义
interface ActionButton {
  key?: string
  text?: string
  icon?: string
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'
  disabled?: boolean
  loading?: boolean
  danger?: boolean
  primary?: boolean
  className?: string
  needConfirm?: boolean
  confirmTitle?: string
  confirmContent?: string
  handler?: (action: ActionButton, index: number) => void
}

// Props
interface Props {
  actions?: ActionButton[]
  moreActions?: ActionButton[]
  direction?: 'horizontal' | 'vertical'
  size?: 'small' | 'medium' | 'large'
  attached?: boolean
  elevated?: boolean
  moreButtonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'
}

const props = withDefaults(defineProps<Props>(), {
  actions: () => [],
  moreActions: () => [],
  direction: 'horizontal',
  size: 'medium',
  attached: false,
  elevated: false,
  moreButtonType: 'default'
})

// Emits
const emit = defineEmits<{
  'action-click': [action: ActionButton, index: number, isMoreAction?: boolean]
}>()

// 响应式数据
const showConfirm = ref(false)
const confirmAction = ref<ActionButton | null>(null)
const pendingActionIndex = ref(-1)
const isMoreAction = ref(false)

// 计算属性
const buttonSize = computed(() => {
  const sizeMap = {
    small: 'mini',
    medium: 'small',
    large: 'medium'
  }
  return sizeMap[props.size] as any
})

// 事件处理
const handleActionClick = (action: ActionButton, index: number, more = false) => {
  if (action.disabled || action.loading) return

  if (action.needConfirm) {
    confirmAction.value = action
    pendingActionIndex.value = index
    isMoreAction.value = more
    showConfirm.value = true
    return
  }

  // 执行自定义处理函数
  if (action.handler) {
    action.handler(action, index)
  }

  // 触发事件
  emit('action-click', action, index, more)
}

const handleConfirmAction = () => {
  if (confirmAction.value) {
    // 执行自定义处理函数
    if (confirmAction.value.handler) {
      confirmAction.value.handler(confirmAction.value, pendingActionIndex.value)
    }

    // 触发事件
    emit('action-click', confirmAction.value, pendingActionIndex.value, isMoreAction.value)
  }

  // 重置状态
  showConfirm.value = false
  confirmAction.value = null
  pendingActionIndex.value = -1
  isMoreAction.value = false
}
</script>

<style lang="scss" scoped>
.action-button-group {
  display: flex;
  gap: $spacing-2;

  &--horizontal {
    flex-direction: row;
    align-items: center;
  }

  &--vertical {
    flex-direction: column;
    align-items: stretch;
  }

  &--small {
    gap: $spacing-1;
  }

  &--medium {
    gap: $spacing-2;
  }

  &--large {
    gap: $spacing-3;
  }

  &--attached {
    gap: 0;

    .action-btn {
      border-radius: 0;
      border-right-width: 0;

      &:first-child {
        border-top-left-radius: $radius-md;
        border-bottom-left-radius: $radius-md;
      }

      &:last-child {
        border-top-right-radius: $radius-md;
        border-bottom-right-radius: $radius-md;
        border-right-width: 1px;
      }

      &:hover {
        z-index: 1;
        position: relative;
      }
    }

    &.action-button-group--vertical {
      .action-btn {
        border-radius: 0;
        border-right-width: 1px;
        border-bottom-width: 0;

        &:first-child {
          border-top-left-radius: $radius-md;
          border-top-right-radius: $radius-md;
          border-bottom-left-radius: 0;
        }

        &:last-child {
          border-bottom-left-radius: $radius-md;
          border-bottom-right-radius: $radius-md;
          border-top-right-radius: 0;
          border-bottom-width: 1px;
        }
      }
    }
  }

  &--elevated {
    padding: $spacing-3;
    background: white;
    border-radius: $radius-lg;
    box-shadow: $shadow-md;
    border: 1px solid $gray-200;
  }

  .action-btn {
    transition: all $duration-normal ease;

    &--primary {
      background: $gradient-primary;
      border-color: transparent;

      &:hover {
        transform: translateY(-1px);
        box-shadow: $shadow-md;
      }
    }

    &--danger {
      &:hover {
        background: $error-500;
        border-color: $error-500;
        color: white;
      }
    }
  }

  .more-actions-btn {
    &:hover {
      background: $gray-100;
    }
  }
}

// 下拉菜单项样式
:deep(.tiny-dropdown-item) {
  display: flex;
  align-items: center;
  gap: $spacing-2;

  &.dropdown-item--danger {
    color: $error-500;

    &:hover {
      background: rgba($error-500, 0.1);
    }
  }
}

// 暗色主题
[data-theme="dark"] {
  .action-button-group {
    &--elevated {
      background: $dark-100;
      border-color: $dark-200;
    }

    .more-actions-btn {
      &:hover {
        background: $dark-200;
      }
    }
  }
}
</style>
